<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <button @click="sendStudentName">把学生名给App</button>
    <button @click="unbindTest1">解绑test1事件</button>
    <br/>
    <h1>测试销毁组件</h1>
    <h2>num:{{num}}</h2>
    <button @click="addNum">num++</button>
    <button @click="closeVc">销毁当前组件</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            name:'张三',
            age:18,
            num:0
        }
    },
    methods:{
      sendStudentName(){
        //触发Student组件实例身上的test1事件
        this.$emit('test1',this.name,1,2,3,4,5)
        //触发test3事件
        this.$emit('test3')
      },

      //解绑test1事件
      unbindTest1(){
        this.$off('test1') //适用于解绑一个事件
      },
      addNum(){
        console.log('进入addNum...')
        this.num++
      },
      //销毁组件
      closeVc(){
        this.$destroy() //组件销毁后所有的组件自定义事件全都不奏效了
      }
    }
}
</script>

<style scoped>
.student{
    background-color: pink;
    padding: 5px;
    margin-top: 10px;
}
</style>